<template>
  <!-- 登录页面 -->
  <div class="login" :style="Imglogin">
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label=""
        placeholder="账户"
        :rules="[{ required: true, message: '' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label=""
        placeholder="密码"
        :rules="[{ required: true, message: '' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >立即登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Register } from "@/request.js/api";
export default {
  data() {
    return {
      username: "",
      password: "",
      Imglogin: {
        background: "url(" + require("@/assets/登录页-1.jpg") + ")",
        backgroundSize: "100% 100%",
      },
    };
  },
  methods: {
    onSubmit(value) {
      //发送请求
      Register({
        username: value["用户名"],
        password: value["密码"],
      }).then((res) => {
        console.log(res);
        if (res.errCode == 0) {
          //存起来把token值
          localStorage.setItem("token", res.data);
          //登录成功就跳转home页面
          this.$router.push({ path: "/home" });
        }
      });
    },
  },
  //进入之前先判断一下是否登录

  created() {
    //获取token的值
    let token = localStorage.getItem("token");
    if (token) {
      this.$toast("您已经登录了");
      setTimeout(() => {
        this.$router.push({ path: "/home" });
      }, 1000);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.login {
  width: 100%;
  height: 100vh;
  position: relative;
}
.van-form {
  width: 94%;
  position: absolute;
  left: 25%;
  bottom: 24vh;
  border-radius: 0.1rem 0.1rem;
}
.van-field {
  font-size: 0.2rem;

  margin-bottom: 0.2rem;
  padding: 0.05rem 0 0.05rem 0.1rem;
  input::-webkit-input-placeholder {
    /*WebKit browsers*/

    color: red;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */

    color: red;
    font-size: 0.2rem;
    background-color: orange;
  }
  input {
    color: #bababa;
    font-size: 0.2rem;
    background-color: orange;
    padding: 0.05rem 0 0.05rem 0.1rem;
  }
}

.van-button {
  width: 1rem;
  border-radius: 25%;
  color: #fff;
  font-size: 0.2rem;
  background-color: blue;
  margin-left: 0.3rem;
}
</style>